<template>
  <el-container>
    <el-header>优惠券模板</el-header>
    <el-main>
      <el-header>
        <el-row :gutter="10">
          <el-col
            :xs="4"
            :sm="6"
            :md="8"
            :lg="9"
            :xl="11"
            style="display: flex"
          >
            <div>是否有效：</div>
            <div>
              <el-select
                v-model="status"
                clearable
                placeholder="请选择"
                @change="gai"
              >
                <el-option label="有效" value="1"> </el-option>
                <el-option label="无效" value="0"> </el-option>
              </el-select>
            </div>
          </el-col>

          <el-col
            :xs="4"
            :sm="6"
            :md="8"
            :lg="9"
            :xl="11"
            style="display: flex"
          >
            <div>优惠券名称：</div>
            <div>
              <el-input v-model="input" placeholder="请输入优惠券名称"></el-input>
            </div>
            <div>
              <el-button
                type="primary"
                icon="el-icon-search"
                @click="sou"
              ></el-button>
            </div>
          </el-col>

          <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
            <div></div>
          </el-col>

          <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
            <div></div>
          </el-col>
        </el-row>
      </el-header>
      <div class="bos"></div>
      <el-footer>
        <el-button type="primary" icon="el-icon-plus" @click="open"
          >添加优惠券</el-button
        >
      </el-footer>

      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="ID" min-width="180"></el-table-column>

        <el-table-column
          prop="title"
          label="优惠券名称"
          min-width="180"
        ></el-table-column>

        <el-table-column
          prop="type"
          label="优惠券类型"
          min-width="180"
        ></el-table-column>

        <el-table-column
          prop="coupon_price"
          label="面值"
          min-width="180"
        ></el-table-column>

        <el-table-column
          prop="use_min_price"
          label="最低消费额"
          min-width="180"
        ></el-table-column>

        <el-table-column
          prop="coupon_time"
          label="有效期限(天)"
          min-width="180"
        ></el-table-column>

        <el-table-column
          prop="sort"
          label="排序"
          min-width="180"
        ></el-table-column>

        <el-table-column prop="status" label="是否有效" min-width="180">
          <template slot-scope="scope">
            <p v-if="scope.row.status == 1" style="color: blue">√</p>
            <p v-else style="color: red">×</p>
          </template>
        </el-table-column>

        <el-table-column prop="add_time" label="添加时间" min-width="180">
          <template slot-scope="scope">
            <p>{{ scope.row.add_time | time }}</p>
          </template>
        </el-table-column>

        <el-table-column label="操作" min-width="180" fixed="right">
          <template slot-scope="scope">
            <div v-if="scope.row.status == 1">
              <el-button type="text" @click="shi(scope.row)">
                立即失效
              </el-button>
              <el-button type="text" @click="handleDelete(scope.row)">
                删除
              </el-button>
            </div>
            <div v-else>
              <el-button type="text" @click="handleDelete(scope.row)">
                删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <Motal9 :data-list="form" @add="addList"></Motal9>
    </el-main>
  </el-container>
</template>

<script>
import {
  Table,
  addlist,
  kaiguan,
  del,
} from "../../api/dataallocation/DiscountsTemplate";
import Motal9 from "../../components/data allocation/Motal9";
export default {
  components: {
    Motal9,
  },
  data() {
    return {
      input: "",
      tableData: [],
      status: "",
      title: "",
      page: 1,
      limit: 15,
      form: {
        test: "添加",
        guan: false,
        coupon_price: "",
        coupon_time: "",
        sort: "",
        status: 1,
        title: "",
        type: 0,
        use_min_price: "",
        id: "",
      },
    };
  },
  filters: {
    time: function (val) {
      return moment(val * 1000).format("YYYY-MM-DD");
    },
  },
  created() {
    Table({
      status: this.status,
      title: this.title,
      page: this.page,
      limit: this.limit,
    }).then((res) => {
      console.log(res.data);
      this.tableData = res.data.data.list;
    });
  },

  methods: {
    sou() {
      this.title = this.input;
      Table({
        status: this.status,
        title: this.title,
        page: this.page,
        limit: this.limit,
      }).then((res) => {
        console.log(res.data);
        this.tableData = res.data.data.list;
      });
    },
    gai(val) {
      console.log(val);
      this.status = val;
      Table({
        status: this.status,
        title: this.title,
        page: this.page,
        limit: this.limit,
      }).then((res) => {
        console.log(res.data);
        this.tableData = res.data.data.list;
      });
    },
    handleDelete(val) {
      del({ id: val.id }).then((res) => {
        console.log(res);
        if (res.data.status == 200) {
          Table({
            status: this.status,
            title: this.title,
            page: this.page,
            limit: this.limit,
          }).then((res) => {
            console.log(res.data);
            this.tableData = res.data.data.list;
          });
        }
      });
    },
    shi(val) {
      console.log(val);
      kaiguan({ id: val.id }).then((res) => {
        console.log(res);
        if (res.data.status == 200) {
          Table({
            status: this.status,
            title: this.title,
            page: this.page,
            limit: this.limit,
          }).then((res) => {
            console.log(res.data);
            this.tableData = res.data.data.list;
          });
        }
      });
    },
    addList(val) {
      addlist({
        category_id: val.category_id,
        coupon_price: val.coupon_price,
        coupon_price: val.coupon_price,
        coupon_time: val.coupon_time,
        sort: val.sort,
        status: val.status,
        title: val.title,
        type: val.type,
        type: val.type,
        use_min_price: val.use_min_price,
      }).then((res) => {
        console.log(res);
        if (res.data.status == 200) {
          Table({
            status: this.status,
            title: this.title,
            page: this.page,
            limit: this.limit,
          }).then((res) => {
            console.log(res.data);
            this.tableData = res.data.data.list;
          });
        }
      });
    },
    open() {
      this.form.guan = true;
      this.form.coupon_price = "";
      this.form.coupon_time = "";
      this.form.sort = "";
      this.form.status = "";
      this.form.title = "";
      this.form.type = 0;
      this.form.use_min_price = "";
    },
  },
};
</script>
<style lang='scss' scoped>
.el-header,
.el-footer {
  background-color: white;
  color: #333;
  line-height: 60px;
}

.el-main {
  background-color: #b3c0d1;
  color: #333;
  //   line-height: 160px;
}
.bos {
  width: 100%;
  height: 20px;
  background: white;
}
</style>